<template>
  <div class="my-custiom">
    <div class="my-custiom-content">
      <div class="my-custiom-title">
       每月-用户访问数
      </div>
      <ve-histogram :data="chartData" :settings="chartSettings" height="400px" />
    </div>
  </div>
</template>

<script lang="ts">
// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import Api from '../../api/api';
import VeHistogram from 'v-charts/lib/histogram.common';
import * as echarts from 'echarts/lib/echarts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必要组件
echarts.use([
  GridComponent,
  LineChart,
  BarChart,
  CanvasRenderer,
  TooltipComponent,
  LegendComponent
]);

@Component({
  components: {
    VeHistogram
  }
})
export default class TestPage extends Vue {
  @Prop({ type: String, default: '' })
  userId!: string;

  @Prop({ type: Array || null, default: null })
  roleIds!: any[] | null;

  @Prop({ type: Array || null, default: null })
  roleName!: any[] | null;

  @Prop({ type: String, default: '' })
  phone!: string;

  @Prop({ type: String, default: '' })
  email!: string;

  @Prop({ type: String, default: '' })
  deptName!: string;

  @Prop({ type: String, default: '' })
  deptId!: string;


  replayToken: any = ''
  chartData = {
    columns: ['日期', '用户数量', '增长率'],
    rows: []
  };


  chartSettings = {
    metrics: ['用户数量', '增长率'],
    dimension: ['日期'],
    yAxisType: ['KMB', 'percent'],
    yAxisName: ['用户数', '增长率'],
    axisSite: { 
      right: ['增长率'],
      left: ['用户数量']
    },
    showLine: ['增长率'],
    scale: [true, true],
  };
  async created() {
    await this.fetchReplayToken();
    this.fetchList()
  }

  async fetchReplayToken() {
    this.replayToken = await Api.exportReplayToken()
    // console.log('this.replayToken', this.replayToken);
  }
  async fetchList() {
    const res = await Api.exportYhfs({
      chart: {
        authorization: 1,
        dataSourceId: "f6e4ff8b87aa4fcb9669b28f",
        dynamicParams: [],
        filter: [],
        filterNone: true,
        having: [],
        id: "fd73c857-a5d5-492d-ae04-c3819c63e6e0",
        mainTable: "WT_646c76dea2d9e93b02a0181d",
        options: {},
        relations: null,
        title: "每月-用户访问数",
        type: "biax",
        useType: 100,
        dimension: [
          {
            alias: "",
            associationCode: null,
            canUsed: true,
            dataType: -1,
            field: "登录时间",
            mainField: "",
            name: "登录时间",
            options: {
              format: "YM",
              isCustomSort: false,
              order: "asc",

            },
            parentSchemaCode: null,
            primaryKey: false,
            relation: false,
            schemaCode: "WT_646c76dea2d9e93b02a0181d",
            specialType: "",
            tableId: "WT_646c76dea2d9e93b02a0181d",
            tableName: "登录日志",
            type: "date",
            uid: "U3D86F7C4",
            visible: true,
          }
        ],
        metric: [
          {
            uid: "UBF8927AE",
            associationCode: null,
            schemaCode: "WT_646c76dea2d9e93b02a0181d",
            tableName: "登录日志",
            parentSchemaCode: null,
            tableId: "WT_646c76dea2d9e93b02a0181d",
            field: "用户id",
            name: "用户id",
            dataType: -1,
            visible: true,
            primaryKey: false,
            specialType: "",
            type: "string",
            alias: "用户数量",
            needAlias: false,
            relation: false,
            mainField: "",
            options: {
              aggregateType: "COUNTDISTINCT",
              percent: "DEFAULT",
              numberFormat: {
                comma: false,
                percent: false,
                fraction: false
              }
            },
            canUsed: true
          },
          {
            uid: "U4988ED5C",
            associationCode: null,
            schemaCode: "WT_646c76dea2d9e93b02a0181d",
            tableName: "登录日志",
            parentSchemaCode: null,
            tableId: "WT_646c76dea2d9e93b02a0181d",
            field: "用户id",
            name: "用户id",
            dataType: -1,
            visible: true,
            primaryKey: false,
            specialType: "",
            type: "string",
            alias: "环比增长率",
            needAlias: false,
            relation: false,
            mainField: "",
            options: {
              aggregateType: "COUNTDISTINCT",
              percent: "DEFAULT",
              numberFormat: {
                comma: false,
                percen: true,
             fraction: 2
        },
              ratio: 2
            },
            canUsed: true
          }
        ],
        sort: [
          {
            uid: "U3D86F7C4",
            associationCode: null,
            schemaCode: "WT_646c76dea2d9e93b02a0181d",
            tableName: "登录日志",
            parentSchemaCode: null,
            tableId: "WT_646c76dea2d9e93b02a0181d",
            field: "登录时间",
            name: "登录时间",
            dataType: -1,
            visible: true,
            primaryKey: false,
            specialType: "",
            type: "date",
            alias: "",
            needAlias: false,
            relation: false,
            mainField: "",
            options: {
              format: "YM",
              isCustomSort: false,
              order: "asc"
            },
            canUsed: true
          }
        ]
      },
      config: {
        reportId: this.replayToken.data,
        token: localStorage.getItem('token') || '',
      },
      corpId: "a",
      dataSourceId: "f6e4ff8b87aa4fcb9669b28f"

    })
    console.log('res', res);
    if (res.data?.series) {
      this.chartData.rows = res.data.series.map(item => ({
        日期: item.U3D86F7C4,
        用户数量: item.UBF8927AE,
        增长率: item.U4988ED5C,
      }));
      
    }
  }

}

</script>

<style lang="less" scoped>
.my-custiom {
  height: 100%;
  width: 100%;


}

.my-custiom-content {
  padding: 20px;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.my-custiom-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 16px;
  color: black;
  position: relative;
  /* 确保伪元素相对于该容器定位 */

}

.my-custiom-content-text {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: space-between;
  /* 平分间距 */
}

.my-custiom-content-text>div {
  flex: 1;
  /* 每个子项占一行的均等比例 */
  margin-bottom: 10px;
  /* 设置上下间距 */
  margin-left: 10px;
  text-align: center;
  /* 文本居中 */
  min-width: 45%;
  /* 确保每个子项至少占据一半宽度 */
}

/* 可选：为每个子项添加背景色或边框以增强视觉效果 */
.my-custiom-content-text>div {
  background-color: #eef7ff;
  border: 1px solid #d1e9ff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
/deep/.ve-histogram {
  /* 折线颜色 */
  .echarts-line path {
    stroke: #FFC300 !important;
  }
  
  /* 右侧Y轴文字颜色 */
  .yAxis.right .axis-label {
    color: #FFC300;
  }

  /* 图例颜色 */
  .ve-legend li:nth-child(2) i {
    background: #FFC300 !important;
  }
  
  /* 提示框样式 */
  .echarts-tooltip {
    .series-name:nth-child(2) {
      color: #FFC300;
    }
  }
}
</style>